<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>Bootstrap 4的新增组件——旋转器和卡片</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">

</head>
<body class="container">
<h3 class="mb-4">卡片列</h3>
<div class="card-columns">
    <div class="card bg-primary p-3">
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg" class="card-img-top" alt="">
    </div>
    <div class="card bg-dark p-3">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136450&di=383a697fe84e0bdf70bc5961d8f43a8d&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg" class="card-img-top" alt="">
    </div>
    <div class="card bg-info p-3">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136450&di=c16fcf8aa8f00aa885828746196ace9f&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg" class="card-img-top" alt="">
    </div>
    <div class="card bg-light p-3">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136450&di=ae7d1c3e776315c51f3655c1b7e4eff5&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F64%2F76%2F20300001349415131407760417677.jpg" class="card-img-top" alt="">
    </div>
    <div class="card bg-warning p-3">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136450&di=3a6fcd999f3061e01f55f1d73d8dc113&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F27%2F10%2F01300000324235124757108108752.jpg" class="card-img-top" alt="">
    </div>
    <div class="card bg-danger p-3">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136449&di=32cfa6d2775ae32d8f887c88133b039f&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F68%2F61%2F300000839764127060614318218_950.jpg" class="card-img-top" alt="">
    </div>
    <div class="card bg-secondary p-3">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671176807&di=5a0cb0e2deb1773f78442d2444cfc86d&imgtype=0&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D3984473917%2C238095211%26fm%3D214%26gp%3D0.jpg" class="card-img-top" alt="">
    </div>
    <div class="card bg-success p-3">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592671136449&di=cb600a99414969d3743b96be8d2de659&imgtype=0&src=http%3A%2F%2Fa.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F5366d0160924ab1857f1cbae35fae6cd7a890b47.jpg" class="card-img-top" alt="">
    </div>
</div>

<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>